<template>
    <div class="ouats">
        <div class="ouat">
            <div class="nav_spj">
                <span>平价</span>
                <span>租车</span>
                <span>At Par</span>
            </div>

            <div class="denglu">
                <div :loading="loading"
                     class="denlb"
                     size="medium"
                     type="primary"
                     style="width:100%;"
                     @click="zhuyemian()">进入主页面</div>
            </div>

            <div class="denglu">
                <!--        <div class="denlb" @click="ccd">登录</div>-->
                <div :loading="loading"
                     class="denlb"
                     size="medium"
                     type="primary"
                     style="width:100%;"
                     @click="dingdan()">查看订单其详情</div>
            </div>
        </div>
        <div class="flass">
            <img src="../../../assets/register/denglubj.png" alt="" />
<!--            <div class="bottom">-->
<!--                <p>登陆及表示您同意<span>《平价驻车用户隐私协议》</span></p>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
    import Vue from "vue";
    import { Toast } from "vant";

    Vue.use(Toast);
    export default {
        props: {},
        mounted() {

        },
        data() {
            return {

            };
        },
        methods: {
            zhuyemian(){
                this.$router.push("/banner")
            },
            dingdan(){
                this.$router.push("/wodedingdan")
            }
        }
    }
</script>

<style scoped lang="less">
    .ouats {
        height: 100%;
    }
    .ouat {
        font-size: 0.2rem;
        margin: 0 0.24rem;
        display: flex;
        flex-direction: column;
    }
    .nav_spj {
        height: 3.22rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.4684rem;
        color: #0c67f9;
        font-weight: bolder;
        & > span:last-child {
            font-size: 0.4275rem;
        }
    }
    .zhanhao {
        margin: 0.7rem 0;
        font-size: 0.28rem;
        height: 2.08rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        & > div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .zhanh > input {
            height: 0.86rem;
            padding: 0 0.19rem;
            width: 5.5rem;
            font-size: 0.24rem;
            color: #999999;
            border-radius: 0.05rem;
            border: none;
            border: 2px solid #e7e7e7;
        }
        .inputs {
            border: 2px solid #e7e7e7;
            /*height: 0.86rem;*/
            padding: 0 0.19rem;
            width: 5.5rem;
            font-size: 0.24rem;
            color: #999999;
            border-radius: 0.05rem;
            display: flex;
            align-items: center;
            & > input {
                flex: 1;
                border: none;
                height: 0.8rem;
            }
            & > .van-icon-eye-o {
                font-size: 0.35rem;
            }
        }
        label {
            font-weight: 900;
        }
    }
    .denglu {
        margin: 0.22rem 0 0.22rem 0;
        /*display: flex;*/
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        /*height: 1.45rem;*/
        .denlb {
            background-color: #42a2fe;
            border-radius: 0.08rem;
            /*height: 1rem;*/
            text-align: center;
            line-height: 1rem;
            flex-direction: column;
        }
        & > div {
            /*display: flex;*/
            color: white;
            font-size: 0.36rem;
            justify-content: space-between;
            width: 100%;
            span {
                font-size: 0.28rem;
                color: #3d88f7;
            }
        }
    }
    .flass {
        position: relative;
        bottom: 0;
        height: 2.9rem;
        margin-top: 100px;
        & > img {
            width: 3.86rem;
            height: 2.04rem;
            z-index: 5;
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .bottom {
        background-color: #e9f1ff;
        height: 1.95rem;
        width: 100%;
        position: absolute;
        bottom: -.37rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        & > p {
            z-index: 7;
            margin-bottom: 0.5rem;
            color: #bcbcbc;
            font-size: 0.2rem;
            text-align: center;
            & > span {
                color: #0c67f9;
            }
        }
    }
</style>
